<template>
  <p>数组变化侦听</p>
  <button @click="addListHandle">添加数据</button>
  <ul>
    <li v-for="(item, index) of names" :key="index"> {{ item }} </li>
  </ul>
  <button @click="concatHandle">合并数组</button>
  <p>数组1</p>
  <p v-for="(item, index) of name1" :key="index">{{ item }}</p>
  <p>数组2</p>
  <p v-for="(item, index) of name2" :key="index">{{ item }}</p>

</template>
<script>
export default {
  data() {
    return {
      names: ['it', 'doudou', 'iwer']
      , name1: [1, 2, 3, 4, 5]
      , name2: [6, 7, 8, 9, 10]
    }
  }
  , methods: {
    addListHandle() {
      // 引起ui自动更新
      // this.names.push('sakura')
      // 不会引起ui的自动更新
      // this.names.concat('sahura')
      // console.log(this.names.concat('sahura'))
      this.names = this.names.concat('sahura')
    }
    , concatHandle() {
      this.name1 = this.name1.concat(this.name2)
      // console.log(this.name1.concat(this.name2))

    }
  }
}
</script>